<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>冒泡排序演示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="index.html" class="back-button">← 返回首页</a>
            <h1>🎈 冒泡排序 🎈</h1>
        </div>
        
        <div class="game-controls">
            <button id="generateNew">生成新数字</button>
            <button id="startSort">开始排序</button>
            <button id="nextStep">下一步</button>
            <button id="reset">重置</button>
        </div>

        <div class="numbers-container" id="numbersContainer">
        </div>

        <div class="explanation">
            <h3>📝 说明：</h3>
            <p>冒泡排序就像小气泡往上浮一样，大的数字会慢慢"浮"到右边！</p>
            <div id="currentStep">准备开始...</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html> 